<template>
    <view class="history_page">
        <Empty v-if="pageStatus === 'empty'" />
        <!-- 售后历史列表 -->
        <scroll-view
            v-else
            class="history_list"
            scroll-with-animation
            scroll-y
            :scroll-top="scrollView.scrollTop"
            :show-scrollbar="false"
            lower-threshold="30"
            @scroll="handleScroll"
            @scrolltolower="loadData"
        >
            <view
                v-for="(i, idx) in serviceHistortList"
                :key="idx"
                class="history_list_item"
                @click="lookServiceDetails(i)"
            >
                <view class="serial">
                    <text>序列号：{{ i.simSerialNumber }}</text>
                    <text :class="['status', i.status === 1 ? 'active' : 'inactive']">{{
                        i.status === 1 ? '进行中' : '已完成'
                    }}</text>
                </view>
                <view class="describe">
                    问题描述：
                    <text class="text">{{ i.description }}</text>
                </view>
                <view>
                    {{ dayjs(i.createTime).format('YYYY-MM-DD') }}
                </view>
            </view>
        </scroll-view>
        <!-- 回到顶部 -->
        <view v-if="scrollView.oldScrollTop > 0" class="top" @click="handleBackTop">
            <image :src="`${OSS_URL}/backTop2.png`" mode="" class="top_icon"> </image>
        </view>
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import dayjs from 'dayjs';

import Empty from '@/components/Empty/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getServiceHistoryApi } from '@/api';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const familyId = ref(''); // 家长id
const pageStatus = ref('');
const serviceHistortList = ref([]);
const page = ref({
    current: 1,
    size: 10,
    total: 0,
});
const timer = ref(null);

const scrollView = ref({
    oldScrollTop: 0,
    scrollTop: 0,
});

function handleScroll(e) {
    scrollView.value.oldScrollTop = e.detail.scrollTop;
}
// 回到顶部
function handleBackTop() {
    if (timer.value) {
        clearTimeout(timer.value);
    }
    timer.value = setTimeout(() => {
        scrollView.value.scrollTop = scrollView.value.oldScrollTop;
        nextTick(() => {
            scrollView.value.scrollTop = 0;
        });
    }, 300);
}
// 加载更多
function loadData() {
    if (serviceHistortList.value.length < page.value.total) {
        page.value.current++;
        fetchServiceHistoryList();
    }
}
// 售后详情
function lookServiceDetails(i) {
    let details = encodeURIComponent(JSON.stringify(i));
    uni.navigateTo({
        url: `/pages/mine/warranty/serviceHistoryDetails?details=${details}`,
    });
}
// 获取售后历史
function fetchServiceHistoryList() {
    uni.showLoading({
        title: '加载中',
    });
    getServiceHistoryApi(page.value)
        .then(res => {
            if (res.code === 200) {
                let { data } = res;
                page.value.total = data.totalRows;
                if (data.rows.length === 0) {
                    pageStatus.value = 'empty';
                } else {
                    pageStatus.value = '';
                    serviceHistortList.value.push(...data.rows);
                }
                wx.hideLoading();
            }
        })
        .catch(err => {
            wx.hideLoading();
        });
}
onLoad(() => {
    serviceHistortList.value = [];
    fetchServiceHistoryList();
});
</script>

<style lang="scss" scoped>
.history_page {
    padding: 30rpx 30rpx 0;
    box-sizing: border-box;
    color: #333;

    .history_list {
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
        ::-webkit-scrollbar {
            width: 0;
        }

        &_item {
            padding: 30rpx 30rpx 40rpx 30rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            border-radius: 30rpx;
            background-color: #fff;
            font-size: 28rpx;

            .describe {
                margin-bottom: 16rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;

                .text {
                    color: #666;
                }
            }

            .serial {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16rpx;
                line-height: 45rpx;
                font-size: 32rpx;

                .status {
                    font-size: 26rpx;
                }

                .active {
                    color: #615dff;
                }

                .inactive {
                    color: #a9aab5;
                }
            }
        }
    }

    .top {
        position: fixed;
        bottom: 186rpx;
        right: 30rpx;

        .top_icon {
            width: 100rpx;
            height: 100rpx;
        }
    }
}
</style>
